import React from 'react';
import { Modal, Table, Card } from 'antd';
import moment from 'moment';
import { getCommonContent } from '@/pages/Task/components/InfoModal/commonContent';
import { MODAL_FORCE_PARAM, MODAL_DEFAULT_PARAM } from '@/pages/Task/components/InfoModal/config';
import { fetchOperateDetails } from './util';
import styles from './index.less';
import {
    FILE_RENDER,
    MINUTE_TO_WORK_STR,
    MINUTE_TO_STR24,
    FORMAT_DATE,
    MINUTE_TO_STR,
    REASON_RENDER
} from './renderUtil';

// import { fetchOperateDetails } from './util';

// card部分内容
const cardContent = dataSource => {
    const columns = [
        {
            title: '截止时间',
            dataIndex: 'planEndTime',
            render: FORMAT_DATE
        },
        {
            title: '实际完成时间',
            dataIndex: 'actualEndTime',
            render: FORMAT_DATE,
            require: true
        },
        {
            title: '逾期时间',
            dataIndex: 'overdueWorkTime',
            render: MINUTE_TO_STR24
        },
        {
            title: '预估工时',
            dataIndex: 'estimateWorkDuration',
            render: MINUTE_TO_STR
        },
        {
            title: '实际工时',
            dataIndex: 'actualWorkDuration',
            require: true,
            render: MINUTE_TO_WORK_STR
        },
        {
            title: '逾期工时',
            dataIndex: 'overdueWorkDuration',
            render: MINUTE_TO_STR
        },
        {
            title: '备注说明',
            dataIndex: 'operateReason',
            render: REASON_RENDER
        },
        {
            title: '附件',
            dataIndex: 'taskOperateFile',
            render: FILE_RENDER
        }
    ];
    return getCommonContent(dataSource, columns);
};

const tableContent = dataSource => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            width: 50,
            render: (text, record, index) => index + 1
        },
        {
            title: '任务编号',
            dataIndex: 'taskNo',
            width: 120
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            render: text => (
                <div
                    style={{
                        width: '100%',
                        minWidth: 100,
                        position: 'relative'
                    }}
                >
                    <span
                        style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            top: 0,
                            transform: 'translateY(-50%)',
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis'
                        }}
                        title={text}
                    >
                        {text}
                    </span>
                </div>
            )
        },
        {
            title: '执行人',
            dataIndex: 'taskExecutor',
            width: 100
        },
        {
            title: '部门',
            dataIndex: 'departmentName',
            width: 120
        },
        {
            title: '开始时间',
            dataIndex: 'planStartTime',
            width: 120,
            render: text => (text ? moment(text).format('MM-DD HH:mm') : '')
        },
        {
            title: '截止时间',
            dataIndex: 'planEndTime',
            width: 120,
            render: text => (text ? moment(text).format('MM-DD HH:mm') : '')
        }
    ];
    return (
        <Card bordered={false} className={styles.turnFinishForm}>
            <div style={{ paddingBottom: 10 }}>逾期影响提示：当前任务已逾期，或将影响以下后置任务进度</div>
            <Table rowKey="id" bordered={false} columns={columns} dataSource={dataSource} pagination={false} />
        </Card>
    );
};
export const showTurnFinishInfoModal = async (id, operateRecordId) => {
    const dataSource = await fetchOperateDetails(id, operateRecordId);
    const { rearTaskList, ...rests } = dataSource;
    Modal.info({
        ...MODAL_DEFAULT_PARAM,
        title: '转已完成详情',
        ...MODAL_FORCE_PARAM,
        width: 860,
        content: (
            <>
                {cardContent(rests)}
                {!!rearTaskList && !!rearTaskList.length && tableContent(rearTaskList)}
            </>
        )
    });
};
